<template>
	<view class="task-wrap">
		<view class="scroll-wrap" style="position: relative;">
			<view class="tabContainer" style="margin-bottom: 120px;">
				<!-- 样品列表 -->
				<view>
					<checkbox-group @change="checkboxChanges">


						<view class="sample-term-wrap" v-for="(item, index) in sampleTaskInfo.sampleItemVos"
							:key='index'>
							<view class="sample-term" :style="{background:checkColor(item.checked)}">
								<view class="sample-code">
									<text>样品编号：{{item.sampleNo}}</text>
									<text :class="'sample-status color_'+ item.sampleStatus">
										{{sampleStatusMap[item.sampleStatus]}}
										<text v-if="item.changeFlag == 1" style="color: #f11;"> /
											{{sampleStatus[item.changeFlag]}}</text>
									</text>
									<checkbox v-if="item.changeFlag != 1" style="transform:scale(0.7);"
										:checked="item.checked" :value="item.sampItemId" shape="circle"></checkbox>


								</view>
								<view @click="editTask">


									<view class="sample-detail">
										<text class="title">检测位置：</text>
										<text class="value">{{item.factorPoint}}</text>
									</view>
									<view class="sample-detail">
										<text class="title">检测类别：</text>
										<text class="value">{{item.secdClassName}}</text>
									</view>
									<view class="sample-detail">
										<text class="title">检测因子：</text>
										<text class="value">{{item.factorName}}</text>
									</view>
									<view class="sample-detail">
										<text class="title">采样人：</text>
										<text class="value">{{item.collectUser?item.collectUser:''}}</text>
									</view>
									<view class="sample-detail">
										<text class="title">采样时间：</text>
										<text class="value">{{item.collectTime?item.collectTime:''}}</text>
									</view>

								</view>
								<!-- 底部分割线条 -->
								<!-- <view class="sample-line" v-if="collapse"></view> -->

							</view>

						</view>

					</checkbox-group>
				</view>
			</view>

			<view class="footerBtn" style="display: flex;">
				<view class="btn footerBtn footerBtns">
					<view style="padding:0 10px;flex: 1;">
						<button class="dialogBtn  rightTabsSingleBtn" style="border: 0;" @click="del">删除
							<text v-if="delArr.length>0">({{delArr.length}})</text>
						</button>
						<!-- <u-button class="leftTabsBtn rightTabsSingleBtn" type="warning"  @click="toEgManage" v-show="false">修改样品（22）</u-button> -->
					</view>

				</view>
				<u-modal v-model="showss" title="提示" @confirm="confirm" :mask-close-able="true">
					<view class="slot-content" style="margin: 5px 10px;">
						<!-- <input v-model="content" type='text' class=""  placeholder="输入删除原因" /> -->
						<input class="uni-input" v-model="content" focus placeholder="输入删除原因" />
					</view>
				</u-modal>
			</view>
		</view>
	</view>
</template>

<script>
	import sampleTerm from '@/components/sample/sample-term.vue'
	const STOKEN_STUTES = {
		'0': '复核人',
		'1': '确认人',
		'2': '审核人'
	}
	export default {

		components: {
			sampleTerm,
		},
		data() {
			return {
				selectItem: '',

				checkboxValue: [],
				STOKEN_STUTES,
				sampleStatusMap: {
					'0': '待采样',
					'1': '已采样',
					'2': '待组长审核',
					'3': '待负责人审核',
					'4': '审核通过',
					'5': '审核失败',
					'6': '已入库',
					'7': '部分出库',
					'8': '已出库',
					'9': '入库中',
					'10': '待复核'
				},
				sampleStatus: {
					'0': '未更改',
					'1': '删除待审核',
					'2': '新增待审核',
					'3': '修改待审核',
					'4': '已驳回'
				},
				checkSimilar: false,

				showCont: false,
				value: ['0'],
				collapseList: [],

				isEgManage: false,
				checkboxVisible: true,
				showss: false,
				content: '',
				source: 'edit',
				taskId: '',
				delArr: [],
				sampleTaskInfo: {
					projectName: '',
					consignorName: '',
					inspectionName: '',
					sampleCount: '',
					jobId: '',
					inspectionLinker: '',
					singImageUrl: '',
					sampleVos: [],
				}
			}
		},
		onLoad(e) {
			if (e.taskId) {
				this.taskId = e.taskId
			}

		},
		watch: {

			// 'sampleTaskInfo.sampleItemVos': {
			//           handler: function (newValue, oldValue) {
			//    this.sampleTaskInfo.sampleItemVos = newValue

			//      console.log(newValue.checked, oldValue.checked,33323);
			//           },
			//           immediate: true,
			//  deep: true
			//         }
		},
		onShow() {

			this.delArr = []
			this.getSampleVos()

		},
		methods: {
			checkboxChanges: function(e) {
				let values = e.detail.value;
				console.log(values);
				this.delArr = values
				this.sampleTaskInfo.sampleItemVos.map((item) => {

					this.delArr.map((inj) => {
						if (item.sampItemId == inj) {
							item.checked = true
						}
						this.$forceUpdate()
					})
				})

			},
			checkColor(v) {
				let color;
				color = !v ? '#fff' : '#d3dcf9'
				return color
			},
			editTask() {
				// 跳转 任务 -> 样品 -> 详情页
				this.$common.navigateTo('/pages/detail/index?sampItemId=' + this.sampleData.sampItemId +
					'&editable=' + this.editable + '&title=' + this.title + '&detailStatus=' + this.detailStatus +
					'&isEgManage=' + this.isEgManage);
			},
			add(sampItemId) {
				this.showCont = !this.showCont;
				// #ifdef MP-WEIXIN
				this.$nextTick(() => {
					this.$refs.collapse.resize()
				})
				// #endif
			},

			getSampleVos() {
				this.$api.getSamplerList('sample/items/' + this.taskId, res => {
					if (res.code === 200) {
						this.sampleTaskInfo = res.result || []
						if (this.sampleTaskInfo.sampleItemVos.length > 0) {
							this.sampleTaskInfo.sampleItemVos.map((item) => {
								this.$set(item, 'checked', false)
							})
						}
					}
				})
			},
			confirm() {


				let params = {
					ids: this.delArr + '',
					message: this.content
				}
				this.$api.commonForGetParam('sample/deleteByIds', params, res => {
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功，数据审核中...',
							icon: 'none',
							duration: 3000
						});

						setTimeout(() => {
							this.showss = false;
						}, 1000)
						uni.navigateBack({
							delta: 1
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			//批量删除
			del() {
				// this.delArr = []
				// this.sampleTaskInfo.sampleItemVos.map((item)=>{
				// 			if(item.checked == true) this.delArr.push(item.sampItemId)
				// 		})
				if (this.delArr.length == 0) {
					uni.showToast({
						title: '请选择删除数据',
						icon: 'none',
						duration: 2000
					});
					return
				}

				this.showss = true
			},

			goToHandWriting(sampItemId) {
				this.$common.navigateTo('/pages/handWriting/index?sampItemId=' + sampItemId);
			},
			toEgManage() {
				uni.setNavigationBarTitle({
					title: '样品管理'
				})
				this.hidden = true
				this.isEgManage = true

			}
		}
	}
</script>

<style scoped>
	uni-page-body {
		height: 100%;
	}

	.input_del {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
	}

	.task-wrap {
		background: #F0F2FA;
		height: 100vh;
		display: flex;
		flex-direction: column;

	}

	.project-info {
		height: 280rpx;
		width: calc(100%-98rpx);
		background-color: #D6D8DF;
		padding-left: 49rpx;
		padding-right: 49rpx;
	}

	.sample-detail {
		margin-top: 20rpx;
		font-size: 25rpx;
		height: 32rpx;
		display: flex;
		align-items: center;

	}

	.sample-detail .title {
		color: #193566;
		font-weight: bolder;
		opacity: 0.8;
		display: inline-block;
		width: 140rpx;
		text-align: right;
	}

	.sample-detail .value {
		color: #193566;
		font-weight: 400;
		opacity: 0.7;
		width: 65%;
		display: inline-block;
		padding-left: 5%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
	}

	.scroll-wrap {
		flex: 1;
		overflow: scroll;
		padding-bottom: 50rpx;
	}

	.tabContainer {
		height: auto;
	}

	.signature {
		position: absolute;
		top: 0;
		right: 0;
		width: 167rpx;
		height: 61rpx;
		color: #fff;
		background-color: #193566;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
	}

	.signatureImg image {
		position: absolute;
		top: 0;
		right: 0;
		width: 61rpx;
		height: 61rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
	}

	.footerBtn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.btn {
		border-radius: 0;
		width: 100%;
		background: #2f3a89;
	}

	.footerBtns {
		display: flex;
		background: #d2dcf8;
		padding: 10rpx 0;
		box-shadow: -1px 0 1px #ccc;
	}

	.dialogBtns {
		position: absolute;
		top: -180rpx;
		left: 0;
		padding: 10rpx 20rpx;
		background: #d2dcf8;
		width: 100%;
		box-shadow: 1px 0px 1px #ccc;
		padding-top: 20rpx;
	}

	.dialogBtn {
		border: 1px solid #eee;
		margin-bottom: 10rpx;
		width: 100%;
		padding: 0;
		font-size: 14px;
		height: 60rpx;
		color: #2f3a89;
		background: #ffda94;
	}

	.leftTabsBtn {
		width: 100%;
		border: 1px solid #eee;
		height: 60rpx;
		font-size: 14px;
		color: #2f3a89;
		background: #ffda94;
	}

	.rightTabsBtn {
		height: 60rpx;
		font-size: 14px;
		background: #2f3a89;
	}

	.rightTabsSingleBtn {
		width: 50%;
		color: #2f3a89;
		height: 60rpx;
		font-size: 14px;
		box-shadow: 1px 1px 3px #ccc;

	}
</style>


<style scoped>
	.sample-term-wrap {
		width: calc(100%-70rpx);
		display: flex;
		justify-content: center;
		flex-direction: column;
		/* align-items: center; */
		padding-left: 35rpx;
		padding-right: 35rpx;
	}

	.sample-term {
		/* width: 90%; */
		min-height: 390rpx;
		/* height:370rpx; */
		border-radius: 19rpx;
		background: #fff;
		padding: 30rpx;
		padding-top: 0rpx;
		box-shadow: 0px 5px 11px 2px rgba(0, 0, 0, 0.16);
		margin-top: 30rpx;
	}

	.radius {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.sample-code {
		display: block;
		height: 84rpx;
		width: 100%;
		border-bottom: 1px solid #ECECEC;
		;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 25rpx;
		font-weight: bolder;
		color: #2E2E2E;
	}

	.sample-line {
		display: block;
		height: 14rpx;
		width: 100%;
		border-bottom: 1px solid #ECECEC;
		;
		color: #2E2E2E;
	}

	.sample-detail {
		margin-top: 25rpx;
		font-size: 25rpx;
		min-height: 32rpx;
		display: flex;
	}

	.sample-detail .title {
		color: #2E2E2E;
		font-weight: bolder;
		opacity: 0.8;
		display: inline-block;
		width: 125rpx;
		text-align: right;
	}

	.sample-detail .value {
		color: #555555;
		font-weight: 400;
		opacity: 0.7;
		width: 70%;
		display: inline-block;
		padding-left: 5%;
	}

	.sample-detail .value-collapse {
		color: #555555;
		font-weight: 400;
		opacity: 0.7;
		width: 70%;
		display: inline-block;
		padding-left: 5%;
	}

	.status {
		float: right;
		font-weight: bolder;
		font-size: 25rpx;
	}

	.reject {

		color: #FFDA94;
	}

	.confirm {
		color: #2F3A89;
	}

	::v-deep .collapse-wrap {
		/* width: 90%!important; */

	}

	.collapse-content {
		max-height: 140rpx;
		padding: 30rpx;
		padding-top: 0rpx;
		padding-bottom: 0rpx;

	}

	.collapse-content:last-child {
		height: 140rpx;
		padding: 30rpx;
		padding-top: 0rpx;
		padding-bottom: 0rpx;

	}

	::v-deep .uni-collapse-item__title {
		display: none !important;
	}

	::v-deep .uni-collapse-item__wrap {
		border-top: 1px solid #ECECEC;
	}

	::v-deep .uni-collapse-item__wrap-content.uni-collapse-item--border {
		border-bottom-width: 0px !important;
	}

	.button {
		height: 61rpx;
		width: 100%;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		background-color: #2F3A89;
		font-size: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 待采样 色号 */
	.color_0 {
		color: #60D8FF;
	}

	/* 待复核 色号 */
	.color_10 {
		color: #749EF4;
	}

	/* 已采样 色号 */
	.color_1 {
		color: #81ACBD;
	}

	.sample-status {
		font-size: 25rpx;
		padding-right: 20rpx;
	}

	.icon-taggle {
		color: #fff;
		margin-left: 5px;
	}

	::v-deep .uniui-bottom {
		color: #fff !important;
	}

	::v-deep .uniui-top {
		color: #fff !important;
	}
</style>